<%-- 
    Document   : consultarGuardias
    Created on : 17/11/2010, 10:56:28 AM
    Author     : yngrdyn
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ include file='../Templates/security.jsp' %>
<style type="text/css">
    #AlineacionCalendario {
        width: 700px;
        margin: 0 auto;
    }
    #external-events {
        float: left;
        width: 60px;
        padding: 10px 10px;
        border-spacing: 10px;
        text-align: center;
    }
    #external-events h4 {
        font-size: 16px;
        margin-top: 20px;
        padding-top: 1em ;
    }
    #Grupos{
        font-size: 16px;
        margin-top: 20px;
        padding-top: 1em ;
    }
    .external-event { /* try to mimick the look of a real event */
                      margin: 10px 0;
                      padding: 2px 4px;
                      background: #3366CC;
                      color: #fff;
                      font-size: .85em;
                      cursor: pointer;
    }
    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }
    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }
    #calendar {
        float: right;
        width: 600px;
    }
    .fc,
    .fc .fc-header,
    .fc .fc-content {
        font-size: 1em;
    }
    .fc {
        direction: ltr;
        text-align: left;
    }
    .fc table {
        border-collapse: collapse;
        border-spacing: 10px;
    }
    .fc td, .fc th {
        padding: 0;
        vertical-align: top;
    }

    /* Header
    ------------------------------------------------------------------------*/
    table.fc-header {
        width: 100%;
    }
    .fc-header-left {
        width: 25%;
    }
    .fc-header-left table {
        float: left;
    }
    .fc-header-center {
        width: 50%;
        text-align: center;
    }
    .fc-header-center table {
        margin: 0 auto;
    }
    .fc-header-right {
        width: 25%;
    }
    .fc-header-right table {
        float: right;
    }
    .fc-header-title {
        margin-top: 10px;
        white-space: nowrap;
    }
    .fc-header-space {
        padding-left: 10px;
    }

    /* right-to-left */
    .fc-rtl .fc-header-title {
        direction: rtl;
    }

    /* Buttons
    ------------------------------------------------------------------------*/

    /* Content Area & Global Cell Styles
    ------------------------------------------------------------------------*/
    .fc-widget-content {
        border: 1px solid #ccc; /* outer border color */
    }
    .fc-content {
        clear: both;
    }
    .fc-content .fc-state-default {
        border-style: solid;
        border-color: #ccc; /* inner border color */
    }
    .fc-content .fc-not-today { /* override jq-ui highlight (TODO: ui-widget-content) */
                                background: none;
    }
    .fc-cell-overlay { /* semi-transparent rectangle while dragging */
                       background: #9cf;
                       opacity: .2;
                       filter: alpha(opacity=20); /* for IE */
    }
    .fc-view { /* prevents dragging outside of widget */
               width: 100%;
               overflow: hidden;
    }

    /* Global Event Styles
    ------------------------------------------------------------------------*/
    .fc-event,
    .fc-agenda .fc-event-time,
    .fc-event a {
        border-style: solid;
        border-color: #36c;     /* default BORDER color (probably the same as background-color) */
        background-color: #36c; /* default BACKGROUND color */
        color: #fff;            /* default TEXT color */
    }

    /* Use the 'className' CalEvent property and the following
	 * example CSS to change event color on a per-event basis:
	 *
	 * .myclass,
	 * .fc-agenda .myclass .fc-event-time,
	 * .myclass a {
	 *     background-color: black;
	 *     border-color: black;
	 *     color: red;
	 *     }
	 */

    .fc-event {
        text-align: left;
    }
    .fc-event a {
        overflow: hidden;
        font-size: .85em;
        text-decoration: none;
        cursor: pointer;
    }
    .fc-event-editable {
        cursor: pointer;
    }
    .fc-event-time,
    .fc-event-title {
        padding: 0 1px;
    }
    /* for fake rounded corners */
    .fc-event a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }
    /* right-to-left */
    .fc-rtl .fc-event a {
        text-align: right;
    }
    /* resizable */
    .fc .ui-resizable-handle {
        display: block;
        position: absolute;
        z-index: 99999;
        border: 0 !important; /* important overrides pre jquery ui 1.7 styles */
        background: url() !important; /* hover fix for IE */
    }

    /* Horizontal Events
    ------------------------------------------------------------------------*/
    .fc-event-hori {
        border-width: 1px 0;
        margin-bottom: 1px;
    }
    .fc-event-hori a {
        border-width: 0;
    }
    /* for fake rounded corners */
    .fc-content .fc-corner-left {
        margin-left: 1px;
    }
    .fc-content .fc-corner-left a {
        margin-left: -1px;
        border-left-width: 1px;
    }
    .fc-content .fc-corner-right {
        margin-right: 1px;
    }
    .fc-content .fc-corner-right a {
        margin-right: -1px;
        border-right-width: 1px;
    }
    /* resizable */
    .fc-event-hori .ui-resizable-e {
        top: 0           !important; /* importants override pre jquery ui 1.7 styles */
        right: -3px      !important;
        width: 7px       !important;
        height: 100%     !important;
        cursor: e-resize;
    }
    .fc-event-hori .ui-resizable-w {
        top: 0           !important;
        left: -3px       !important;
        width: 7px       !important;
        height: 100%     !important;
        cursor: w-resize;
    }
    .fc-event-hori .ui-resizable-handle {
        _padding-bottom: 14px; /* IE6 had 0 height */
    }

    /* Month View, Basic Week View, Basic Day View
    ------------------------------------------------------------------------*/
    .fc-grid table {
        width: 100%;
    }
    .fc .fc-grid th {
        border-width: 0 0 0 1px;
        text-align: center;
    }
    .fc .fc-grid td {
        border-width: 1px 0 0 1px;
    }
    .fc-grid th.fc-leftmost,
    .fc-grid td.fc-leftmost {
        border-left: 0;
    }
    .fc-grid .fc-day-number {
        float: right;
        padding: 0 2px;
    }
    .fc-grid .fc-other-month .fc-day-number {
        opacity: 0.3;
        filter: alpha(opacity=30); /* for IE */
        /* opacity with small font can sometimes look too faded
	   might want to set the 'color' property instead
	   making day-numbers bold also fixes the problem */
    }
    .fc-grid .fc-day-content {
        clear: both;
        padding: 2px 2px 0; /* distance between events and day edges */
    }
    /* event styles */
    .fc-grid .fc-event-time {
        font-weight: bold;
    }
    /* right-to-left */
    .fc-rtl .fc-grid {
        direction: rtl;
    }
    .fc-rtl .fc-grid .fc-day-number {
        float: left;
    }
    .fc-rtl .fc-grid .fc-event-time {
        float: right;
    }

    /* Vertical Events
    ------------------------------------------------------------------------*/
    .fc-event-vert {
        border-width: 0 1px;
    }
    .fc-event-vert a {
        border-width: 0;
    }
    /* for fake rounded corners */
    .fc-content .fc-corner-top {
        margin-top: 1px;
    }
    .fc-content .fc-corner-top a {
        margin-top: -1px;
        border-top-width: 1px;
    }
    .fc-content .fc-corner-bottom {
        margin-bottom: 1px;
    }
    .fc-content .fc-corner-bottom a {
        margin-bottom: -1px;
        border-bottom-width: 1px;
    }
    /* event content */
    .fc-event-vert span {
        display: block;
        position: relative;
        z-index: 2;
    }
    .fc-event-vert span.fc-event-time {
        white-space: nowrap;
        _white-space: normal;
        overflow: hidden;
        border: 5px;
        font-size: 10px;
    }
    .fc-event-vert span.fc-event-title {
        line-height: 13px;
    }
    .fc-event-vert span.fc-event-bg {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: .3;
        filter: alpha(opacity=30);
    }
    /* resizable */
    .fc-event-vert .ui-resizable-s {
        bottom: 0        !important;
        width: 100%      !important;
        height: 8px      !important;
        line-height: 8px !important;
        font-size: 11px  !important;
        font-family: monospace;
        text-align: center;
        cursor: s-resize;
    }
    .fc-button-next, .fc-button-prev {
        cursor: pointer;
    }
</style>
<script type='text/javascript' src='js/fullcalendar.min1.js'></script>

<h1 class="title">Gestión de Guardias</h1>
<p class="meta"></p>
<center>
    <h2>Consultar Guardias</h2>
    <br>
    <html:form action="/consultarGuardias" styleId="consultarGuardiasForm" onsubmit="return sendForm('consultarGuardiasForm','consultarGuardias','center');" >
        <input type="hidden" id="sedeSelected"/>
        <table cellspacing="10px">
            <tr>
                <td>Sede:</td>
                <td><select id="Sedes" name ="idSede"></select></td>
            </tr>
        </table>
        <br>
        <html:button value = "Buscar" property="" styleId="consultarGuardiaSede"></html:button>
        <br>
        <div id='calendar'></div>
        <div style='clear:both'></div>
    </html:form>
    <br>
    <br>
</center>
<script type="text/javascript">

    $(function(){
        listaSedes();
    });

    var sedeSelected = "";
    $('#consultarGuardiaSede').click(function(){
        sedeSelected = $('#Sedes :selected').val();
        listaGuardias(sedeSelected);
    });

    function listaGuardias(sede){
        $.getJSON("listaDeGuardiasSede.do",{idSede:sede},
        function(data) {
            acumulaEvents = "[";
            $.each(data.Guardias, function(i,item){
                fecha = item.fecha_guardia.split('-');
                ano = fecha[0];
                mes = fecha[1]-1;
                dia =  fecha[2];
                if (i == data.tam-1){
                    acumulaEvents = acumulaEvents +"{title:'"+item.id_grupo+"',url:'Modulo4/consultarGuardiaGrupo.jsp',start:new Date('"+ano+"','"+mes+"','"+dia+"')}]"
                } else {
                    acumulaEvents = acumulaEvents +"{title:'"+item.id_grupo+"',url:'Modulo4/consultarGuardiaGrupo.jsp',start:new Date('"+ano+"','"+mes+"','"+dia+"')},"
                }
            });
            eventos = eval("("+acumulaEvents+")");
            createCalendar(eventos);
        });
    }

    function createCalendar(eventos){
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            events: eventos,
            eventClick: function(event) {
                // opens events in a popup window
                my_window = window.open(event.url, 'gcalevent','scrollbars=1','resizable=1','width=100,height=100');
                listaPersonalGrupo(event.title,sedeSelected);
                return false;
            },
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            }
        });
    }

    function listaPersonalGrupo(grupo,sede){
        var string1 = "";
        $.getJSON("listaPersonalGrupo.do",{grupo:grupo,idSede:sede},
        function(data) {
            $.each(data.PersonalGrupo, function(i,item){
                string1 = string1+"<tr><td>"+item.ci+"</td><td>"+item.nombre_1+"</td><td>"+item.apellido_1+"</td><td>"+item.activo+"</td></tr>";
            });
            var tu ='<style type=\'text/css\'>.post {margin-bottom: 8px;background: url(images/img09.jpg) repeat-y left top;}.post-bgtop {background: url(images/img08.jpg) no-repeat left top;}.post-bgbtm {background: url(images/img10.jpg) no-repeat left bottom;}.post .title {padding-top: 15px;padding-left: 20px;color: #000000;}.post .title a {color: #000000;border: none;}.post .meta {border-bottom: 1px dashed #B5DEF4;padding-left: 20px;padding-bottom: 5px;text-align: left;font-family: Arial, Helvetica, sans-serif; font-size: 11px;font-style: italic;}.post #entry {margin: 0 auto;padding: 15px 0;text-align: center;}.post #entry table{text-align: justify;margin: 0 auto;}.post #entry2 {padding: 10px 20px 15px 20px;text-align: justify;overflow: scroll;}</style><link href="Modulo3/sorter/style_sortTable.css" rel="stylesheet" type="text/css" /><head><title>ConsultarGuardias</title></head><body><center><div class="post"><h1 class="title">Personal Perteneciente a '+nomb+'</h1><p class="meta"><hr><br></p><table  class="sortable"><tr><th>C&eacute;dula</th><th>Nombre</th><th>Apellido</th><th>Activo?</th></tr>'+string1+'</table></div></center></body>';
            my_window.document.write(tu);
        });
    }
</script>
